import React from 'react';
import { Modal, Icon } from 'antd';
import { connect } from 'react-redux';
import { requestLogout } from 'Actions/userAction';
import ModifyInfoModal from './ModifyInfoModal';
import './index.scss';

const confirm = Modal.confirm;

class Header extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      Visibility: 'hidden'
    };
    this.handleLogout = ::this.handleLogout;
    this.handleEditModal = ::this.handleEditModal;
    this.handleOk = ::this.handleOk;
  }
  handleLogout() {
    const self = this;
    const videoStatus = document.getElementById('business-video').style.visibility;
    if (videoStatus !== 'hidden') {
      document.getElementById('business-video').style.visibility = 'hidden';
    }
    confirm({
      title: '退出登录',
      content: '你确定要退出登陆吗?',
      onOk() {
        self.props.dispatch(requestLogout());
      },
      onCancel() {
        if (videoStatus !== 'hidden') {
          document.getElementById('business-video').style.visibility = 'visible';
        }
      },
    });
  }
  //public for modify psw
  handleEditModal() {
    this.EditModal.showModal();
  }
  handleOk() {
    this.props.dispatch(requestLogout());
  }
  handleMouseOver() {
    this.setState({
      Visibility: 'visible'
    });
  }
  handleMouseLeave() {
    this.setState({
      Visibility: 'hidden'
    });
  }
  render() {
    const { Visibility } = this.state;
    return (
      <div className="header-wrapper">
        {
          this.props.isLogin ?
            <div className="user">
              <span
                className="item"
                onClick={this.handleModify}
                onMouseEnter={this.handleMouseOver.bind(this)}
                onMouseLeave={this.handleMouseLeave.bind(this)}
              >
                <img src="images/head/icon_user.png" alt="用户" />
                {this.props.nickname}
                <span className="modify" onClick={this.handleEditModal} style={{ visibility: Visibility }}>
                  <Icon type="caret-up" className="icon" />
                  修改密码
                </span>
              </span>
              <span className="item" onClick={this.handleLogout}>
                <img src="images/head/icon_logout.png" alt="退出" />
                  退出
                </span>
            </div>
            : ''
        }
        <ModifyInfoModal
          onOk={this.handleOk}
          userId={this.props.userId}
          ref={(ref) => { this.EditModal = ref; }}
        />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.userReducer,
  };
}
export default connect(mapStateToProps)(Header);
